body {
    font-weight           : 500;
    color                 : var(--body-color, #7B7B7D);
    background-color      : #00151f;
    letter-spacing        : .05em;
    overflow              : hidden;
    -webkit-font-smoothing: antialiased
}

a,
a:hover {
    color          : inherit;
    text-decoration: none
}

a:focus {
    outline: inherit
}

button {
    cursor: pointer
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height   : 1.2;
    letter-spacing: 0;
    font-weight   : 800;
    color         : var(--theme-color, #00283a);
    margin-bottom : 0;
    margin-top    : 0;
}

.h1,
h1 {
    font-size: 2.5rem
}

.h2,
h2 {
    font-size: 2rem
}

.h3,
h3 {
    font-size: 1.75rem
}

.h4,
h4 {
    font-size: 1.5rem
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

p {
    margin: 0
}


.trm-text-sm {
    font-size: 12px
}

.trm-text-lg {
    font-size: 16px
}

.trm-contrast {
    color  : var(--theme-color, #00283a) !important;
    opacity: 1 !important
}


.trm-accent-color {
    color: var(--primary, #afb42b)
}

.trm-label {
    text-transform: uppercase;
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: 2px;
    color         : var(--theme-color, #00283a);
    .transition-mixin();

    &.trm-label-light {
        color: var(--body-color, #7B7B7D);
    }

    &.trm-label-color {
        color: var(--primary, #afb42b);
    }
}

a.trm-label {
    i {
        margin-top : -1px;
        margin-left: 10px
    }

    .fa-arrow-right {
        margin-top : -1px;
        margin-left: 5px;
        .transition-mixin();
    }

    &:focus,
    &:hover {
        outline: inherit;

        color: var(--primary, #afb42b);

        .fa-arrow-right,
        .fa-arrow-right {
            transform: translateX(5px);
            color    : inherit
        }
    }
}

.trm-scroll-animation {
    transform: translateY(30px) scale(1.02);
    opacity  : 0;
    .transition-mixin(all, .6s);

    &.trm-active-el {
        opacity  : 1;
        transform: translateY(0) scale(1);
    }
}

.trm-swup-animation {
    .transition-mixin(all, .6s);
    transition-delay: .6s
}

html {
    &.is-animating {
        .trm-preloader {
            opacity         : 1;
            transition-delay: 0s;
        }

        .trm-swup-animation {
            opacity         : 0;
            transition-delay: 0s;
        }
    }
}

.trm-p-10 {
    padding: 10px !important;
}

.trm-p-20 {
    padding: 20px !important;
}

.trm-p-30 {
    padding: 30px !important;
}

.trm-mb-15 {
    margin-bottom: 15px
}

.trm-mb-20 {
    margin-bottom: 20px
}

.trm-mb-30 {
    margin-bottom: 30px
}

.trm-mb-40 {
    margin-bottom: 40px
}

.trm-mt-15 {
    margin-top: 15px
}

.trm-mt-20 {
    margin-top: 20px
}

.trm-mt-40 {
    margin-top: 40px
}

.trm-just-img {
    width        : 100%;
    border-radius: 5px
}

.trm-glow {
    animation-duration       : 2s;
    animation-iteration-count: infinite;
    animation-name           : glowing;
    animation-direction      : alternate;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 0 transparent;
    }

    100% {
        box-shadow: 0 0 20px var(--primary-30, #afb42b);
    }
}

// trm-scroll-container
.trm-scroll-container {
    transition: opacity .6s;
}

// scroll bar

.c-scrollbar {
    width : 10px;
    top   : 8px;
    bottom: 10px;
    height: calc(100vh - 20px)
}

.c-scrollbar_thumb {
    width           : 4px;
    right           : 1px;
    border-radius   : 10px;
    background-color: var(--primary, #afb42b);
    opacity         : 1
}

// incofont symbol
.symbol-icon {
    width         : 1em;
    height        : 1em;
    vertical-align: -0.15em;
    fill          : currentColor;
    overflow      : hidden;
}

//
.locomotive-scroll__sticky-target {
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    pointer-events: none;
}

// back top
.trm-back-top {
    position : fixed;
    right    : 40px;
    bottom   : 30px;
    font-size: 1.5rem;
    cursor   : pointer;
    transform: translateY(50px) scale(0);
    z-index  : 20;
    .transition-mixin();

    &.active-el {
        opacity  : 1;
        transform: translateY(0) scale(1);
    }
}

.katex-display {
    overflow-y: hidden;
    overflow-x: auto;
    padding   : 0.5rem;
}

*::-webkit-selection,
*::-moz-selection,
*::selection {
    color           : var(--theme-color, #00283a);
    background-color: var(--primary, #afb42b);
}

::-webkit-scrollbar {
    width : 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius   : 2px;
    background-color: var(--primary-50, #afb42b);
}

::-webkit-scrollbar-track {
    border-radius   : 2px;
    background-color: rgba(255, 255, 255, 0.1);
}